React.js এর মৌলিক ধারণা

React.js কি?

React.js হলো একটি ওপেন সোর্স JavaScript লাইব্রেরি যা ইউজার ইন্টারফেস (UI) তৈরির জন্য ব্যবহৃত হয়। এটি Facebook দ্বারা ডেভেলপ করা হয়েছে এবং বর্তমানে এটি সবচেয়ে জনপ্রিয় ফ্রন্টএন্ড লাইব্রেরিগুলোর একটি। React.js মূলত একক পেজ অ্যাপ্লিকেশন (SPA) এবং জটিল ইউজার ইন্টারফেস তৈরি করতে ব্যবহৃত হয়, যেখানে দ্রুত এবং ইন্টারঅ্যাকটিভ ইউজার এক্সপেরিয়েন্স প্রদান করা হয়। React-এর প্রধান ধারণা হলো কম্পোনেন্ট-বেসড আর্কিটেকচার, যেখানে UI ছোট ছোট অংশে বিভক্ত থাকে, যা পুনঃব্যবহারযোগ্য এবং সহজে পরিচালনাযোগ্য।

React.js এর মূল ধারণা

১. কম্পোনেন্ট (Component)

React-এ একটি কম্পোনেন্ট হলো একটি UI এর অংশ যা পুনঃব্যবহারযোগ্য এবং স্বতন্ত্রভাবে কাজ করে। প্রতিটি কম্পোনেন্ট নিজের মধ্যে এক্সটেনসিভ লজিক এবং স্টেট (state) ধারণ করতে পারে। React-এ দুটি ধরনের কম্পোনেন্ট থাকে:

• Functional Components: একটি সাধারণ ফাংশন যা UI রেন্ডার করে।
• Class Components: ES6 ক্লাস ব্যবহার করে তৈরিকৃত কম্পোনেন্ট যা স্টেট (state) এবং লাইফসাইকেল মেথডস সমর্থন করে।

// Functional Component Example
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

// Class Component Example
class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

২. JSX (JavaScript XML)

React-এ JSX (JavaScript XML) ব্যবহার করা হয়, যা JavaScript এবং HTML এর একটি মিশ্রণ। JSX এর মাধ্যমে React কম্পোনেন্টের UI ডেফাইন করা হয়, যা সোজা এবং পাঠযোগ্য হয়। JSX-এ HTML-like সিনট্যাক্স ব্যবহার করা হলেও এটি একটি JavaScript কোড, তাই কম্পাইল করার সময় ব্রাউজারে রেন্ডার করা যায়।

const element = <h1>Hello, world!</h1>;

JSX ব্রাউজার সরাসরি বুঝতে পারে না, তাই React JSX কে JavaScript এ কনভার্ট করে।

৩. স্টেট (State)

React কম্পোনেন্টে স্টেট হলো এমন একটি ডেটা যা কম্পোনেন্টের ভেতরে থাকে এবং কম্পোনেন্টের ইন্টারঅ্যাকশন অনুযায়ী পরিবর্তিত হতে পারে। যখন স্টেট পরিবর্তিত হয়, তখন React সেই কম্পোনেন্টটি আবার রেন্ডার করে, যাতে UI হালনাগাদ হয়। স্টেট সাধারণত ক্লাস কম্পোনেন্ট বা ফাংশনাল কম্পোনেন্টে useState হুক ব্যবহার করে পরিচালনা করা হয়।

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

৪. প্রপস (Props)

প্রপস (Properties) হল React কম্পোনেন্টে ডেটা প্রেরণ করার পদ্ধতি। একটি কম্পোনেন্ট অন্য একটি কম্পোনেন্টে প্রপস হিসেবে ডেটা পাঠাতে পারে। প্রপস কম্পোনেন্টের বাইরে থেকে ডেটা পাঠানোর একটি উপায় এবং এগুলো পরিবর্তন করা যায় না, অর্থাৎ এগুলো immutable।

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

function App() {
    return <Welcome name="Sara" />;
}

৫. রেন্ডারিং এবং ভার্চুয়াল DOM (Virtual DOM)

React একটি ভার্চুয়াল DOM (Virtual DOM) ব্যবহার করে যা মূল (real) DOM-এর একটি ভার্চুয়াল কপি। যখন কম্পোনেন্টের স্টেট বা প্রপস পরিবর্তিত হয়, তখন React ভার্চুয়াল DOM-এর মধ্যে পরিবর্তনগুলি আপডেট করে এবং পরবর্তী স্টেপে তা মূল DOM-এর সঙ্গে সিঙ্ক্রোনাইজ (sync) করে। এটি অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে, কারণ এটি কম্পোনেন্টের পরিবর্তন শুধু প্রয়োজনীয় স্থানে করে এবং সম্পূর্ণ পৃষ্ঠাটি রেন্ডার না করে।

৬. React হুকস (Hooks)

React 16.8 এ হুকস (Hooks) প্রবর্তিত হয়েছে যা ফাংশনাল কম্পোনেন্টে স্টেট এবং অন্যান্য React বৈশিষ্ট্য ব্যবহার করতে সহায়তা করে। সবচেয়ে সাধারণ হুক হলো useState এবং useEffect। useState কম্পোনেন্টের মধ্যে স্টেট সংরক্ষণ করে, এবং useEffect কম্পোনেন্টের সাইড ইফেক্ট (যেমন ডেটা ফেচিং, সাবস্ক্রিপশন) পরিচালনা করতে ব্যবহৃত হয়।

import React, { useState, useEffect } from 'react';

function Example() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `You clicked ${count} times`;
    });

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

৭. React লাইফসাইকেল মেথডস

React ক্লাস কম্পোনেন্টে কিছু লাইফসাইকেল মেথডস থাকে, যা কম্পোনেন্টের জীবনচক্রের বিভিন্ন সময়ে ব্যবহৃত হয়। এগুলি হল componentDidMount, componentDidUpdate, componentWillUnmount ইত্যাদি। তবে, ফাংশনাল কম্পোনেন্টে হুকস ব্যবহার করে সেগুলির কার্যকারিতা সম্পাদন করা হয়।

class MyComponent extends React.Component {
    componentDidMount() {
        console.log("Component Mounted");
    }

    componentWillUnmount() {
        console.log("Component Will Unmount");
    }

    render() {
        return <div>Hello World</div>;
    }
}

React.js এর সুবিধা

• কোম্পোনেন্ট-বেসড আর্কিটেকচার: React UI কে ছোট ছোট পুনঃব্যবহারযোগ্য কম্পোনেন্টে বিভক্ত করে, যা কোড মেইনটেনেন্স সহজ করে।
• ভার্চুয়াল DOM: পারফরম্যান্স উন্নত করতে ভার্চুয়াল DOM ব্যবহার করা হয়, যা দ্রুত UI আপডেট নিশ্চিত করে।
• স্টেট এবং প্রপস: React স্টেট এবং প্রপস ব্যবহার করে ডেটা ম্যানেজমেন্ট সহজ করে।
• হুকস: React ফাংশনাল কম্পোনেন্টে স্টেট এবং সাইড ইফেক্ট পরিচালনা করার জন্য হুকস ব্যবহার করা হয়, যা কোডকে আরও পরিষ্কার এবং শক্তিশালী করে তোলে।
• ডেভেলপমেন্ট স্পিড: React-এর লাইব্রেরি এবং টুলসের জন্য দ্রুত ডেভেলপমেন্ট সম্ভব হয়।

সারাংশ

React.js হল একটি শক্তিশালী এবং জনপ্রিয় JavaScript লাইব্রেরি যা ইউজার ইন্টারফেস (UI) তৈরি করতে ব্যবহৃত হয়। এর কম্পোনেন্ট-বেসড আর্কিটেকচার, ভার্চুয়াল DOM, স্টেট এবং প্রপস ব্যবস্থাপনা, এবং হুকস React-কে অত্যন্ত ফ্লেক্সিবল এবং কার্যকরী করে তোলে। React দ্বারা ওয়েব অ্যাপ্লিকেশন তৈরি করা সহজ, দ্রুত এবং স্কেলেবল হয়, যার কারণে এটি ওয়েব ডেভেলপমেন্টে ব্যাপকভাবে ব্যবহৃত হচ্ছে।